<template>
    <bread></bread>

    <a-card :bordered="false">
        <a-tabs v-model:active-key="currentTab" size="large" lazy-load @change="changeTab">
            <a-tab-pane v-for="(item, index) in groupList" :key="`${index}`" :title="item.name"></a-tab-pane>
            <template #extra>
                <a-tooltip content="刷新">
                    <a-link @click="getConfig()">
                        <icon-refresh></icon-refresh>
                    </a-link>
                </a-tooltip>
            </template>
        </a-tabs>
        <a-card :bordered="false">
            <a-form ref="configFormRef" :model="formData" layout="vertical" auto-label-width v-if="formData != null">
                <template v-for="(item, i) in formData.configs" :key="i">
                    <a-row :gutter="12">
                        <a-col :span="item.length">
                            <a-form-item :label="item.title" :field="`configs.${i}.value`" :tooltip="item.remark"
                                :rules="getRules(item)">
                                <!-- 文本框 -->
                                <template v-if="item.type == 'input'">
                                    <a-input v-model="item.value" :placeholder="`请输入${item.title}`"
                                        :disabled="getRule(item, 'disabled', false)"
                                        :readonly="getRule(item, 'readonly', false)"></a-input>
                                </template>
                                <!-- 数字框 -->
                                <template v-if="item.type == 'number'">
                                    <a-input-number v-model="item.value" :placeholder="`请输入${item.title}`"
                                        :disabled="getRule(item, 'disabled', false)"
                                        :readonly="getRule(item, 'readonly', false)"></a-input-number>
                                </template>
                                <!-- 时间范围 -->
                                <template v-if="item.type == 'time-range'">
                                    <a-time-picker format="HH:mm" type="time-range"
                                        :disabled="getRule(item, 'disabled', false)"
                                        :readonly="getRule(item, 'readonly', false)"
                                        :default-value="item.value ? JSON.parse(item.value) : []"
                                        @change="valueString => setTimeRange(valueString, item)"></a-time-picker>
                                </template>
                                <!-- 文本框 -->
                                <template v-if="item.type == 'textarea'">
                                    <a-textarea v-model="item.value" :placeholder="`请输入${item.title}`"
                                        :disabled="getRule(item, 'disabled', false)"
                                        :readonly="getRule(item, 'readonly', false)"></a-textarea>
                                </template>
                                <!-- 单选 -->
                                <template v-if="item.type == 'radio'">
                                    <a-radio-group v-model="item.value" :disabled="getRule(item, 'disabled', false)"
                                        :readonly="getRule(item, 'readonly', false)">
                                        <a-radio v-for="(option, index) in getOptions(item)" :key="index"
                                            :value="option.value">{{ option.name }}</a-radio>
                                    </a-radio-group>
                                </template>
                                <!-- select -->
                                <template v-if="item.type == 'select'">
                                    <a-select v-model="item.value" :disabled="getRule(item, 'disabled', false)"
                                        :readonly="getRule(item, 'readonly', false)">
                                        <a-option v-for="(option, index) in getOptions(item)" :key="index"
                                            :value="option.value">{{ option.name }}</a-option>
                                    </a-select>
                                </template>

                            </a-form-item>
                        </a-col>
                    </a-row>
                </template>
            </a-form>

            <div class="flex-row-center">
                <a-space>
                    <a-button type="primary" @click="saveConfig()">确认保存</a-button>
                </a-space>
            </div>
        </a-card>
    </a-card>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import request from '@/config/request'
import utils from '@/utils/utils'
const currentTab = ref('0');
const groupList = ref([] as any);
const formData = ref(null as any);
const configFormRef = ref();
onMounted(() => {
    getConfig()
})

const changeTab = (index: any) => {
    currentTab.value = index;
    formData.value = groupList.value[index];
}

// 选择时间范围
const setTimeRange = (str: any, item: any) => {
    item.value = JSON.stringify(str);
};
// 格式化规则
const getRule = (data: any, field: string, defaultValue?: any) => {
    const json = data.rules ? JSON.parse(data.rules) : {};

    return !utils.isEmpty(json) && !utils.isEmpty(json[field]) ? json[field] : defaultValue != undefined ? defaultValue : '';
};
// 获取验证规则
const getRules = (data: any) => {
    let rules = getRule(data, 'rules');
    let rulesData = utils.isEmpty(rules) ? [] : rules;
    if (rulesData.length > 0) {
        rulesData.forEach((item: any) => {
            if (utils.isEmpty(item.message) && !utils.isEmpty(item.required)) {
                item.message = data.title + '必填';
            }
        });
    }
    return rulesData;
};
//获取选项值
const getOptions = (data: any) => {
    const json = data.options ? JSON.parse(data.options) : [];
    return !utils.isEmpty(json) ? json : '';
};
/**
 * 获取配置
 */
const getConfig = () => {
    utils.showSpin()
    request.get("/platform/config/list", {}).then((res: any) => {
        groupList.value = res.data;
        changeTab('0')
    })
}

/**
 * 保存配置
 */
const saveConfig = () => {
    configFormRef.value.validate().then((err: any) => {
        if (err) {
            return;
        }
        utils.showSpin();
        request.post("/platform/config/save", formData.value.configs).then((res: any) => {
            utils.success("保存成功");
        })
    })

}

</script>

<style></style>
<style></style>